<template>
  <div class="Pay">
    <header class="h-s">
      <span><router-link to="/"><i></i>首页</router-link></span>
      <span>向商家付钱</span>
      <span><i></i></span>
    </header>
    <article>
      <div class="art_code">
        <div class="bar">
          <img src="../../static/img/barcode.jpg">
          <span>2885******查看数字</span>
        </div>
        <div class="art_code_img">
          <img src="../../static/img/pay_code.jpg">
        </div>
        <p class="balance">
          <i></i>账户余额<span class="glyphicon">></span>
        </p>
      </div>
      <div class="other">
        <p>如付款失败，将尝试其他付款方式</p>
      </div>
      <div class="art_otherway">
        <p>
          <i></i>
          <span>付款码</span>
        </p>
        <p>
          <i></i>
          <span>扫码付</span>
        </p>
        <p>
          <i></i>
          <span>声波付</span>
        </p>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: 'Pay',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body,header,div.Pay,article{
    background: #0e80d8;
  }
  article{
    margin-top: .9rem;
  }
  .h-s{
    padding: .8rem;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 1rem;
  }
  .h-s span i{
    display: inline-block;
    width: 1rem;
    height: 2rem;
    vertical-align: middle;
  }
  .h-s span:nth-child(1) a{
    color: #fff;
  }
  .h-s span:nth-child(1) i{
    background: url(../../static/img/back.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-right: .5rem;
    width: 0.9rem;
    height: 1.3rem;
  }
  .h-s span:nth-child(3) i{
    width: 2rem;
    height: .8rem;
    background: url(../../static/img/more.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  .art_code{
    width: 90%;
    margin: 0 auto;
    background: white;
  }
  div.bar {
    text-align: center;
    color: #a1a1a1;
  }
  .bar span{
    display: block;
  }
  div.bar img{
    width: 80%;
    height: 100%;
    margin: 1rem auto;
    margin-bottom: .8rem;
  }
  .art_code_img{
    width: 100%;
    text-align: center;
  }
  .art_code_img >img{
    width: 50%;
    margin: 3rem auto;
  }
  div.art_code div.payfor_img{
    margin: 10% 0;
  }
  .glyphicon{
    font-size: 1.3rem;
    margin: .8rem .5rem;
    color:#999 ;
  }
  p.balance{
    font-size: 1.1rem;
    text-align: center;
    border-top: 1px solid #dddddd;
    background: #f6f6fa;
    padding: 1rem;
  }
  p.balance i{
    margin: 0 .5rem;
  }
  p.balance i:nth-child(1){
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background: url(../../static/img/money.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    vertical-align: middle;
  }
  div.other{
    text-align: center;
    color: #9dc8ed;
    margin: 1rem 0;
  }
  div.art_otherway{
    color: #9dc8ed;
    display: flex;
    justify-content: space-around;
    padding: 2rem 0;
  }
  div.art_otherway p{
    text-align: center;
    line-height: 1.1rem;
  }
  div.art_otherway p:first-child{
    color: white;
  }
  div.art_otherway p i{
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
  }
  div.art_otherway p:nth-child(1) i{
    background: url(../../static/img/payment_code.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;

  }
  div.art_otherway p:nth-child(2) i{
    background: url(../../static/img/scan_code.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  div.art_otherway p:nth-child(3) i{
    background: url(../../static/img/sound.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  div.art_otherway p span{
    display: inline-block;
    width: 100%;
  }
</style>
